<template>

	<view class="card-bottom">
		<text v-if="TripData.submit_status == 2" class="countdown-text">待支付{{ countdownText }}</text>
		<text v-if="TripData.submit_status == 3" style="color: #000;" class="countdown-text"></text>
		<text v-if="TripData.submit_status == 5" style="color: #000;" class="countdown-text"></text>
		<text v-if="TripData.submit_status == 4" style="color: #000;" class="countdown-text">已出行</text>
		<text v-if="TripData.submit_status == 1" style="color: #000;" class="countdown-text">等待客服报价</text>
		<text v-if="TripData.submit_status == 6" style="color: #000;" class="countdown-text"></text>
		<text v-if="TripData.submit_status == 7" style="color: #000;" class="countdown-text"></text>
		<text v-if="TripData.submit_status == 8" style="color: #000;" class="countdown-text"></text>
		<view class="lt">
			<button open-type="contact" session-from="userPage">联系客服</button>
			<button class="refund-button" v-if="[3].includes(parseInt(TripData.submit_status))"
				@click="openPopupInParent">申请退款</button>
			<button v-if="TripData.submit_status == 1" style="background-color: #409eff;" class="Pay-Now">已提交</button>
			<button v-if="TripData.submit_status == 2 && countdownText !=='已过期'" class="Pay-Now"
				@click="openSucceedPopup">立即付款</button>
			<button v-if="TripData.submit_status == 3" style="background-color: #e7a441;" class="Pay-Now">待出行</button>
			<button v-if="TripData.submit_status == 4" style="background-color: #409eff;" class="Pay-Now"
				@click="ConfirmOrder">确认订单</button>
			<!-- 			<button v-if="TripData.submit_status == 4" style="background-color: #67c23a;" class="Pay-Now">已出行</button> -->
			<button v-if="TripData.submit_status == 5" style="background-color: #e7a441;" class="Pay-Now">退款中</button>
			<button v-if="TripData.submit_status == 6" style="background-color: #67c23a;" class="Pay-Now">交易完成</button>
			<button v-if="TripData.submit_status == 7" style="background-color: #409eff;" class="Pay-Now">退款成功</button>
			<button v-if="TripData.submit_status == 8" style="background-color: #e63345;" class="Pay-Now">拒绝退款</button>
		</view>
	</view>
	<uni-popup ref="successPopup" type="bottom" animation="true" :is-mask-click="false" :mask-click="false">
		<view class="popup-content">
			<view class="icon-box">
				<uni-icons type="checkbox" size="60"></uni-icons>
			</view>
			<text class="title">咨询单下单成功,待客服联系 </text>
			<text class="content">西望顾问将在三天内联系您确认具体旅行方案,请保持联系</text>
			<!-- <text class="content">您可以到'我的--咨询订单'查看订单</text> -->
			<view class="confirm" @click="closeSucceedPopup">我知道了</view>
		</view>
	</uni-popup>
	<customRefundVue ref="refusePopup" :Id="TripData.customized_id" @openPopup="handleOpenPopup"
		@closePopup="handleClosePopup" @SubmitRefund="submitRefund"></customRefundVue>
</template>

<script setup>
	import {
		ref,
		defineEmits,
		watchEffect,
		onUnmounted
	} from 'vue';
	import {
		orderBackPost
	} from '@/config/API/Customize.js'
	import customRefundVue from './customRefund.vue'
	const successPopup = ref(null);
	const refusePopup = ref(null);
	const propos = defineProps({
		TripData: {
			type: Object,
			default: () => {},
		},
	})

	const emit = defineEmits(['custompay', 'closeSucceedPopup']);
	const openSucceedPopup = () => {
		emit('custompay');
		// successPopup.value.open('center'); // 打开弹窗
	};
	// 打开子组件的弹窗方法
	const openPopupInParent = () => {
		console.log('申请退款');
		if (refusePopup.value) {
			console.log('申请退款');
		}
		refusePopup.value.openPopup();
	};

	const submitRefund = (RefundForm) => {
		emit('submitRefund', RefundForm);
	}
	const closeSucceedPopup = () => {
		emit('closeSucceedPopup');
		successPopup.value.close();
		uni.reLaunch({
			url: '/pages/home/index'
		})
	};
	// 倒计时相关变量
	const countdownText = ref('');
	let countdownInterval = null;

	// 启动倒计时
	const startCountdown = () => {
		if (propos.TripData.submit_status !== 2 || !propos.TripData.create_time) return;

		const orderHandleTimeUTC = Date.parse(propos.TripData.create_time.replace(/-/g, '/')); // 处理时间格式
		const deadline = orderHandleTimeUTC + 24 * 60 * 60 * 1000; // 24小时后的时间戳

		const updateCountdown = () => {
			const nowUTC = Date.now();
			const remainingTime = deadline - nowUTC;

			if (remainingTime <= 0) {
				countdownText.value = '已过期';
				clearInterval(countdownInterval);
				countdownInterval = null;
			} else {
				const hours = Math.floor(remainingTime / 1000 / 60 / 60);
				const minutes = Math.floor((remainingTime / 1000 / 60) % 60);
				const seconds = Math.floor((remainingTime / 1000) % 60);
				countdownText.value =
					`${hours.toString().padStart(2, '0')} 小时 ${minutes.toString().padStart(2, '0')} 分 ${seconds.toString().padStart(2, '0')} 秒`;
			}
		};

		countdownInterval = setInterval(updateCountdown, 1000);
		updateCountdown(); // 立即更新一次
	};

	// 监听 TripData 的变化并启动倒计时
	watchEffect(() => {
		startCountdown();
	});

	// 清理定时器
	onUnmounted(() => {
		if (countdownInterval) {
			clearInterval(countdownInterval);
			countdownInterval = null;
		}
	});
</script>

<style lang="scss" scoped>
	.footer {
		width: 100%;
		height: 130rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 40rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		border-top: 2rpx solid #f5f6f7;

		.nav {
			display: flex;
			gap: 60rpx;
			justify-content: center;
			align-items: center;

			.navItem {
				line-height: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				background-color: #fff;
				padding: 0;
				margin: 0;

				image {
					width: 40rpx;
					height: 36rpx;
				}

				text {
					font-size: 28rpx;
					color: #717171;
				}
			}

			.navItem::after {
				border: none;
			}
		}

		.but {
			display: flex;
			align-items: center;
			width: 400rpx;
			height: 100%;
			border-radius: 50rpx;
			background-color: #000;
			overflow: hidden;

			text {
				width: 100%;
				text-align: center;
				color: #fff;
			}
		}

		.but-dai {
			display: flex;
			align-items: center;
			width: 400rpx;
			height: 100%;
			border-radius: 50rpx;
			background-color: #e7a441;
			overflow: hidden;

			text {
				width: 100%;
				text-align: center;
				color: #fff;
			}
		}
	}

	.popup-content {
		width: 85vw;
		border-radius: 30rpx;
		background-color: #fff;
		animation: slideUp 0.3s ease-out;

		.icon-box {
			width: 100%;
			height: 180rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		text {
			display: block;
			text-align: center;
			padding: 50rpx 30rpx 0 30rpx;
			box-sizing: border-box;
		}

		.title {
			width: 100%;
			margin-bottom: 20rpx;
			letter-spacing: 3rpx;
			padding-top: 0;
		}

		.content {
			width: 100%;
			font-size: 26rpx;
			color: #999999;
			padding: 0rpx 30rpx 40rpx 30rpx;
			letter-spacing: 2rpx;
		}

		.confirm {
			width: 100%;
			height: 120rpx;
			border-top: 2rpx solid #f5f6f7;
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			align-items: center;
		}
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.card-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 130rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20rpx;
		padding: 0 30rpx;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-top: 2rpx solid #f5f6f7;

		.countdown-text {
			font-size: 12px;
			color: #e63345;
			margin-right: 10px;
		}

		.lt {
			display: flex;
			gap: 4vw;

			button {
				width: 150rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: transparent;
				padding: 0;
				margin: 0;
				font-size: 26rpx;
				border: 1rpx solid #cccccc;

				&::after {
					border: none;
				}
			}

			.refund-button {
				color: #fc394b;
				border: 1rpx solid #fc394b;
			}

			.Pay-Now {
				color: #fff;
				background-color: #000;
			}
		}
	}
</style>